<template>
    <div class="adverPop">
        <div class="adverBox">
            <div class="topTitle">
                <span>添加广告</span>
                <i class="icon iconfont icon-guanbi" @click="hideBox"></i>
            </div>
            <div class="contentBox">
                <el-form :model="ruleForm" :inline="true" :rules="rules" ref="ruleForm" class="myForm">
                    <el-form-item label="标题" prop="title" class="title">
                        <el-input v-model="ruleForm.title" placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <el-form-item label="跳转类型" prop="skipType" class="skipType">
                        <el-select v-model="ruleForm.skipType" placeholder="请选择跳转类型">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="跳转地址" prop="skipAddress" class="skipAddress">
                        <el-input v-model="ruleForm.skipAddress" placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <el-form-item label="投放区域" prop="province" class="address">
                        <el-select v-model="ruleForm.province" placeholder="省">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                        <el-select v-model="ruleForm.city" placeholder="市">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="有效时间" prop="" class="time">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1">
                        </el-date-picker>
                        <span class="zhi">至</span>
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date2">
                        </el-date-picker>
                    </el-form-item>
                    <div class="upPicture">
                        <div class="upName pic_float">
                            <span>上传图片</span>
                        </div>
                        <div class="pic_float picBox">
                            <ul>
                                <li class="upload_pic">
                                    <span><i class="icon iconfont icon-shangchuan"></i></span>
                                    <p>点击上传</p>
                                    <input class="file" type="file">
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-form>
            </div>
            <div class="btnOperate">
                <button>确定</button>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "adverPop",
        data() {
            return {
                ruleForm: {
                    title: "",
                    skipType: "",
                    skipAddress: "",
                    province: "",
                    city: "",
                    date1: "",
                    date2: ""
                },
                rules: {}
            }
        },
        methods:{
            hideBox() {
                this.$emit('clickBox')
            },
        }
    }
</script>
<style lang="scss">
    .adverPop {
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.4);
        width: 100%;
        height: 100%;
        overflow: hidden;
        .adverBox {
            position: absolute;
            width: 760px;
            height: 716px;
            background-color: #ffffff;
            box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.6);
            border: solid 1px #bfbfbf;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            .topTitle {
                position: relative;
                height: 49px;
                line-height: 49px;
                border-bottom: 1px solid #bfbfbf;
                span {
                    position: absolute;
                    left: 20px;
                    font-family: "MicrosoftYaHei";
                    font-size: 14px;
                    color: #48697b;
                }
                i {
                    position: absolute;
                    right: 20px;
                    color: #6491aa;
                    cursor: pointer;
                }
            }
            .contentBox {
                width: 80%;
                margin-left: 10%;
                margin-top: 60px;
                .myForm {
                    width: 100%;
                    .title {
                        width: 100%;
                        margin-bottom: 40px;
                        .el-form-item__label {
                            margin-left: 2%;
                            line-height: 36px;
                            font-family: "MicrosoftYaHei";
                            font-size: 14px;
                            color: #999999;
                        }
                        .el-form-item__content {
                            line-height: 36px;
                            width: 79%;
                            margin-left: 6%;
                            .el-input__inner {
                                height: 36px;
                                line-height: 36px;
                            }
                        }
                    }
                    .skipType {
                        width: 100%;
                        margin-bottom: 40px;
                        .el-form-item__label {
                            margin-left: 2%;
                            line-height: 36px;
                            font-family: "MicrosoftYaHei";
                            font-size: 14px;
                            color: #999999;
                        }
                        .el-form-item__content {
                            line-height: 36px;
                            width: 45%;
                            margin-left: 1.5%;
                            .el-select {
                                width: 100%;
                                .el-input__icon {
                                    line-height: 36px;
                                }
                                .el-input__inner {
                                    height: 36px;
                                    line-height: 36px;
                                }
                            }
                        }
                    }
                    .skipAddress {
                        width: 100%;
                        margin-bottom: 40px;
                        .el-form-item__label {
                            margin-left: 2%;
                            line-height: 36px;
                            font-family: "MicrosoftYaHei";
                            font-size: 14px;
                            color: #999999;
                        }
                        .el-form-item__content {
                            line-height: 36px;
                            width: 79%;
                            margin-left: 1.5%;
                            .el-input__inner {
                                height: 36px;
                                line-height: 36px;
                            }
                        }
                    }
                    .address {
                        width: 100%;
                        margin-bottom: 40px;
                        margin-right: 0;
                        .el-form-item__label {
                            margin-left: 2%;
                            line-height: 36px;
                            font-family: "MicrosoftYaHei";
                            font-size: 14px;
                            color: #999999;
                        }
                        .el-form-item__content {
                            line-height: 36px;
                            width: 80%;
                            margin-left: 1.5%;
                            .el-select {
                                width: 30%;
                                margin-right: 10px;
                                .el-input__icon {
                                    line-height: 36px;
                                }
                                .el-input__inner {
                                    height: 36px;
                                    line-height: 36px;
                                }
                            }
                        }
                    }
                    .time {
                        width: 100%;
                        margin-bottom: 40px;
                        .el-form-item__label {
                            margin-left: 2%;
                            line-height: 36px;
                            font-family: "MicrosoftYaHei";
                            font-size: 14px;
                            color: #999999;
                        }
                        .el-form-item__content {
                            line-height: 36px;
                            width: 80%;
                            margin-left: 1.5%;
                            .zhi {
                                margin: 0 10px;
                            }
                            .el-date-editor {
                                width: 40%;
                                display: inline-block;
                                .el-input__icon {
                                    line-height: 36px;
                                }
                                .el-input__inner {
                                    height: 36px;
                                    line-height: 36px;
                                }
                            }
                        }
                    }
                    .upPicture {
                        width: 100%;
                        height: 102px;
                        clear: both;
                        .pic_float {
                            float: left;
                            height: 100%;
                            font-family: 'MicrosoftYaHei';
                            font-size: 14px;
                            color: #999999;
                        }
                        .upName {
                            margin-left: 2%;
                            span {
                                margin-top: 10px;
                            }
                        }
                        .picBox {
                            margin-left: 4%;
                            ul {
                                height: 102px;
                                position: relative;
                                li {
                                    position: relative;
                                    top: 1px;
                                    display: inline-block;
                                    width: 100px;
                                    height: 100px;
                                }
                                .upload_pic {
                                    border-radius: 4px;
                                    border: dashed 1px #bfbfbf;
                                    text-align: center;
                                    .file {
                                        position: absolute;
                                        display: block;
                                        width: 100px;
                                        height: 100px;
                                        top: 0;
                                        opacity: 0;
                                        cursor: pointer;
                                    }
                                    span {
                                        margin-top: 20px;
                                        i {
                                            font-size: 35px;
                                        }
                                    }
                                    p {
                                        margin-top: 4px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .btnOperate {
                width: 100%;
                text-align: center;
                margin-top: 40px;
                button {
                    border: 0;
                    outline: none;
                    width: 230px;
                    height: 40px;
                    background-color: #40dcbf;
                    border-radius: 4px;
                    font-family: 'MicrosoftYaHei';
                    font-size: 16px;
                    cursor: pointer;
                    color: #ffffff;
                }
            }
        }
    }
</style>
